<template>
  <div class="views_BOX">
    <vue-scroll
      ref="vs"
      :ops="$store.state.ops"
    >
      <!-- 确认收货信息及交易详情  start -->
      <div class="view_title FSBC">
        <div class="view_title_text">确认收货信息及交易详情</div>
        <div>
          <el-button
            class="baseTextBut set_button_color"
            type="text"
            icon="el-icon-arrow-left"
            @click="backClick"
          >返回</el-button>
        </div>
      </div>
      <div class="setShip_table_Box">
         <div >
        <div class="setShip_table_header"> <span>{{list.createTime}}</span><span>订单号：{{list.corderId}}</span></div>
        <div class="setShip_table_content FSC">
          <div class=" FSC  setShip_content" v-for="(item,index) in list.orderItemLis" :key="index">
            <div class="setShip_img"> <img
                :src="item.picPath | picPathFil"
                alt=""
              ></div>
            <div class="setShip_text"><span>{{item.title}}</span> </div>
          </div>
          <div class="setShip_pieces"> <span>{{item.num}}</span></div>
          <div class="setShip_pieces"><span>运费: {{item.postFee==null?"免费":item.postFee}}</span></div>
          <div class="setShip_remarks"><span>备注: }</span></div>
        </div>
        </div>

        <div class="setShip_table_change FSC"><span class="setShip_pd20">收货信息:</span> <span class="setShip_pd10">三哥</span><span>17635381854</span> <span class="setShip_pd20">吉林省 辽源市 铁岭区 B5刘家屯</span>
          <el-button
            class="baseBorderBut  setShip_button"
            @click="EditorAddress"
          >编辑</el-button>
        </div>

      </div>

      <!-- 确认收货信息及交易详情  end -->
      <!-- 设置发货人信息 -->
      <div class="view_title FSBC">
        <div class="view_title_text">确认发货人信息</div>
      </div>
      <div class="setShip_table_change FSC"><span class="setShip_pd20">发货人信息:</span> <span class="setShip_pd10">三哥</span><span>17635381854</span> <span class="setShip_pd20">吉林省 辽源市 铁岭区 B5刘家屯</span>
        <el-button
          class="baseBorderBut  setShip_button"
          @click="EditorSenderAddress"
        >编辑</el-button>
      </div>
      <!--选择物流服务 start -->
      <div class="view_title FSBC">
        <div class="view_title_text">选择物流服务</div>
      </div>
      <vue-scroll
        ref="vs"
        :ops="$store.state.ops"
      >
        <ul class="setShip_tabs FSBC">
          <li
            @click="hadlelShip( item)"
            v-for="(item,index) in way"
            :key="index"
            :class="item.statu==true?setShip_tabs_isactive:''"
          >{{item.message}}</li>

        </ul>

        <div class="setShip_table_Box2">

          <el-table
            :header-cell-style="{background:'#F5F6FA',height:'60px'}"
            :cell-style="{height:'60px'}"
            :data="Logistics"
            style="width: 100%"
          >
            <el-table-column
              prop="company"
              label="公司名称"
              min-width="188px"
              align="left"
            >
            </el-table-column>
            <el-table-column
              prop="number"
              label="物流单号"
              min-width="740px"
              align="center"
            >
              <template slot-scope="scope">
                <el-col
                  :span="14"
                  class="setShip_center"
                >
                  <el-input v-model="scope.row.number"></el-input>
                </el-col>
                <span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="  "
              label="操作"
              min-width="188px"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="hadlelExpress(scope.row.number)"
                  class="baseBut bg_base setShip_center"
                >确认</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </vue-scroll>
      <!-- 选择物流服务 end-->
    </vue-scroll>
    <!--  更多快递 start -->

    <!--  更多快递 end -->
    <!--  -->
    <editAddress :showTrue="showTrue"></editAddress>

  </div>
</template>
<script>
import { getExpressFindAll } from "../../../../requestApi/order/order";
import editAddress from "./components/editAddress";
export default {
  components: {
    editAddress
  },
  data() {

    return {
      setShip_tabs_isactive: "setShip_tabs_isactive",
      showTrue: { value: false },
      EditorSenderShow:{value:false},
      list:null,
      way: [
        { message: "自行联系物流", statu: true },
        { message: "无需运输", statu: "" },
        { message: "电子面单发货", statu: "" }
      ],

      Logistics: [
        {
          company: "顺丰",
          number: "7788145448455484545415484544"
        },
        ,
      ]
    };
  },
  created: function() {},
  mounted() {
    this.list=this.$route.query.order,
    console.log(this.list)
  },
  computed: {},
  methods: {
   
    //提交信息
    hadlelExpress(number) {},
    /* 返回  start */
    backClick() {
      this.$router.go(-1);
    },
    /* 返回  end */
    hadlelShip(item) {
      if (!item.status) {
        this.way.forEach(e => {
          e.statu = false;
        });
        item.statu = true;
      }
    },
    EditorAddress() {
      this.showTrue.value = true;
    },
  /* 编辑发货人信息 start */
    EditorSenderAddress(){
         
      }
  /* 编辑发货人信息  end  */
  /* 数据回填 start */
     
  /* 数据回填  end  */
  },
  filters: {},
  watch: {}
};
</script>
<style scoped>
.view_but {
  height: 52px;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 10px;
  overflow: hidden;
  margin-bottom: 50px;
}
.view_but_lr {
  justify-content: flex-end;
  height: 52px;
  align-items: center;
}
.deliverServeBut_box {
  height: 20px;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 10px;
}
.table_box {
  min-height: 60px;
  width: calc(100% - 40px);
  margin-left: 20px;
}
/* 标题  start */
.view_title {
  height: 62px;
  width: calc(100% - 40px);
  margin-left: 20px;
}
.view_title_text {
  font-size: 16px;
  font-weight: 500;
  color: rgba(42, 41, 40, 1);
}
/* 标题  end */
.views_BOX {
  background-color: #fff;
}
/* 个人信息表格 start*/
.setShip_table_Box {
  padding: 0 20px 0 20px;
  font-size: 14px;
}
.setShip_table_header {
  height: 36px;
  background: rgba(245, 246, 250, 1);
  border: 1px solid rgba(235, 238, 243, 1);
  padding-left: 20px;
  line-height: 36px;
  color: rgba(45, 55, 62, 1);
  font-weight: 500;
}
.setShip_table_header span {
  padding-right: 50px;
}
.setShip_img {
  margin: 15px 20px 15px 20px;
}
.setShip_img img {
  width: 80px;
  height: 80px;
  display: inline-block;
}
.setShip_text {
  width: 220px;
}
.setShip_pieces {
  width: 23%;
  text-align: center;
}
.setShip_remarks {
  width: 24%;
  text-align: right;
}
.setShip_content {
  width: 27%;
}
.setShip_table_content {
  border: 1px solid rgba(238, 240, 245, 1);
  color: rgba(45, 55, 62, 1);
}
.setShip_table_change {
  height: 60px;
  border: 1px solid rgba(238, 240, 245, 1);
  border-top: none;
  position: relative;
}
.setShip_pd20 {
  padding-left: 20px;
}
.setShip_pd10 {
  padding-left: 10px;
}
.setShip_button {
  position: absolute;
  right: 20px;
}
.setShip_table_Box2 {
  padding: 0 20px 0 20px;
}
/* 个人信息表格 end*/

/* tabs start */
.setShip_tabs {
  width: 300px;
  margin-left: 20px;
  color: rgba(45, 55, 62, 1);
  height: 80px;
  text-align: center;
}
.setShip_tabs_isactive {
  color: rgba(235, 68, 38, 1);
}
.setShip_tabs_isactive::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: rgba(235, 68, 38, 1);
  position: relative;
  top: 10px;
  margin: auto;
}
/* tabs end */
.setShip_center {
  display: block;
  margin: auto;
  float: none;
}
</style>
